<!-- 月度考勤统计 -->
<template>
    <div class="monthlyAttendance">
		<el-form :inline="true" :model="ruleForm" class="demo-form-inline">
        	<el-form-item label="考勤组：">
        	    <el-select v-model="ruleForm.groupId" filterable >
        	        <el-option v-for="item in agrouplist"
        	                   :key="item.id"
        	                   :label="item.name"
        	                   :value="item.id">
        	        </el-option>
        	    </el-select>
        	</el-form-item>
			<el-form-item label="考勤月份：">
			    <el-date-picker
			      v-model="ruleForm.yearMonth"
			      type="month"
			      placeholder="选择月">
			    </el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="searchList" id="monitorEnter">查询</el-button>
				<el-button  @click="resethander">重置</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="tableData" border style="width: 100%">
			<el-table-column label="序号" type="index" width='50' align="center"></el-table-column>
			<el-table-column label="报表名称" prop="name" width="280" align="center"></el-table-column>
			<el-table-column label="考勤组" width="200" prop="groupName" align="center"></el-table-column>
			<el-table-column label="考勤组总人数" prop="groupUsers" align="center"></el-table-column>
			<el-table-column label="全勤人数" prop="fullUsers" align="center">
				<template slot-scope="scope">
					<el-button type="text" @click="infohander(scope.row,1)">{{scope.row.fullUsers}}</el-button>
				</template>
			</el-table-column>
			<el-table-column label="异常人数" prop="abnormalUsers" align="center">
				<template slot-scope="scope">
					<el-button type="text" @click="infohander(scope.row,2)">{{scope.row.abnormalUsers}}</el-button>
				</template>
			</el-table-column>
			<el-table-column label="考勤天数" prop="attendanceDays" align="center"></el-table-column>
			<el-table-column label="正常休息天数" prop="freeDays" align="center"></el-table-column>
			<el-table-column label="考勤起始时间" width="230" prop="attendanceBegionDate" align="center"></el-table-column>
			<el-table-column label="详情" prop="phone" align="center">
				<template slot-scope="scope">
					<el-button type="text" @click="operatehander(scope.row)">查看</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="pagebar">
		    <el-pagination
		            background
		            layout="total, sizes, prev, pager, next"
		            :current-page.sync="ruleForm.pageNum"
		            :page-sizes="[10, 20, 30, 40]"
		            :page-size="ruleForm.pageSize"
		            @size-change="handleSizeChange"
		            @current-change="handleCurrentChange"
		            :total="totalSize">
		    </el-pagination>
		</div>
    </div>
</template>

<script>
import api from "@/api/apiPath"
import utils from "@/common/utils.js"

export default {
    name:"monthlyAttendance",
    title:"考勤月度统计",
    data() {
        return {
        	tableData:[],
			agrouplist:[],
			monthlist:[],
			ruleForm:{
                groupId:undefined,
                yearMonth:'',
                pageNum: 1,
                pageSize: 10,
        	},
        	totalSize: 0
		}
    },
    activated(){
        this.searchList()
    },
    created() {
    	this.getlist()
    	this.getgrouplist()//考勤组
    },
    methods: {
    	infohander(row,type){
    		if (type == 1) {
    			this.$router.push({path:'/monthlyAttendanceDetail',query:{gid:row.groupId,yearMonth:row.yearMonth,checkStatus:0}})
    		}else {
    			this.$router.push({path:'/monthlyAttendanceDetail',query:{gid:row.groupId,yearMonth:row.yearMonth,checkStatus:1}})
    		}
    	},
    	getgrouplist(){
    	    this.$axios.get('/checkin/clockstatus/getgrouplist').then(res=>{
    	        this.agrouplist = res
    	        this.agrouplist.unshift({id:undefined,name:'全部'})
    	    })
    	},
    	resethander(){
			this.ruleForm.groupId = undefined
			this.ruleForm.yearMonth = ''
    	},
    	handleCurrentChange() {
    	    this.getlist()
    	},
    	handleSizeChange(val) {
    	    this.ruleForm.pageSize = val
    	    this.getlist();
    	},
    	operatehander(row){
    		this.$router.push({path:'/monthlyAttendanceDetail',query:{gid:row.groupId,yearMonth:row.yearMonth}})
    	},
    	getlist(){
    		this.ruleForm.yearMonth = utils.getTimeString(this.ruleForm.yearMonth).substring(0,7)
    		this.$axios.post('/checkin/attendance/monthly/list',this.ruleForm).then(res=>{
				this.tableData = res.list
                this.totalSize = res.total
    		})
    	},
    	searchList(){
    		this.ruleForm.pageNum = 1 	  
    		this.getlist();
    	}
    },

}
</script>
<style lang="stylus" scoped>
  
</style>


